<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./src/style/main.css">
</head>

<body>
    <div id="app">
        <div class="homeHeader">
            <img src="./src/images/home-search-text.png" alt="">
            <form action="">
                <input type="text" value="" placeholder="搜索职位/公司">
                <button>搜索</button>
            </form>
        </div>

        <div class="homeContainer" v-for="item in categories">
            <dl>
                <dt>
                    <img :src="item.icon" alt="">
                    <div class="subName">
                        <h4>{{item.title}}</h4>
                    </div>
                </dt>
                <dd>
                    <a class="tag" href="" v-for="(tag, index) in item.tags" :key="index">{{tag}}</a>

                </dd>
            </dl>

        </div>

        <div class="homeFooter">
            <div class="footerText">
                <p>违法和不良信息举报邮箱：jubao@kanzhun.com</p>
                <p>企业服务热线和举报投诉：400 065 5799</p>
            </div>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // import Axios from 'axios'
        var vm = new Vue({
            el: '#app',
            data: {
                categories: []
            },
            methods: {},
            created() {
                fetch('http://127.0.0.1:5501/src/api/index.json')
                    .then(function (res) {
                        return res.json()
                    }).then(function (data) {
                        vm.categories = data

                    })
            },

        });
    </script>
</body>

</html>